<template>
  <div>
      <nav>
        <img @click="onClose" src="../components/imgs/icon-left.png" alt="">
        <p>用户pos机维护管理页面</p>
      </nav>
      <div class="btn">
        <router-link target="_blank" :to="{path:'/gmhhr',query:{userId:this.userId,status:1}}">
          <i-button type="info" size="small">给当前用户新增pos机</i-button>
        </router-link>
      </div>
      <Row class="body">
        <i-col span="4">用户名</i-col>
        <i-col span="4">家庭地址</i-col>
        <i-col span="4">pos机名称</i-col>
        <i-col span="4">pos机终端编号</i-col>
        <i-col span="4">获取时间</i-col>
        <i-col span="4">操作</i-col>
      </Row>
      <Row class="list" v-for="(item) of userList" :key="item.name">
        <i-col span="4">{{item.userName}}</i-col>
        <i-col span="4">{{item.userAddress}}</i-col>
        <i-col span="4">{{item.posName1}}</i-col>
        <i-col span="4"><i-input v-model="item.terminalNumber"  style="width:150px"/></i-col>
        <i-col span="4">{{item.createTime}}</i-col>
        <i-col span="4">
          <i-button type="info" size="small"  @click="handleUpdateManager(item.id,item.terminalNumber)">修改</i-button>|
          <i-button type="error" size="small"  @click="handleDelManager(item.id,item.userId)">删除</i-button>
        </i-col>
      </Row>
  </div>

</template>

<script>
import axios from 'axios'
export default {
  name: 'hhrPosList',
  data () {
    return {
        userList:'',
        self: this,
        userId :'',
      }
  },
  methods: {
    onClose(){
      this.$router.back(-1)
    },
    getListInfo () {
      axios.post('/web/api/manager/selectPosById',{"id":this.userId}).then(this.getListInfoSucc)
    },
    getListInfoSucc (res) {
      console.log('tag', res)
      this.userList = res.data.date
    },
    handleUpdateManager (id,terminalNumber) {
      axios.post('/web/api/manager/updateTerminalById',{"id":id,"terminalNumber":terminalNumber}).then(this.UpdateInfoSucc)
    },
    UpdateInfoSucc(res){
      this.$Message.success("修改成功")
      this.getListInfo();
    },
    handleDelManager(id,userId){
      axios.post('/web/api/manager/deletePosById',{"id":id,"userId":userId}).then(this.DelInfoSucc)
    },
    DelInfoSucc(res){
      this.$Message.success("删除成功")
      this.getListInfo();
    }
  },
  mounted () {
    this.userId = this.$route.query.userId
    this.getListInfo();
  }
}
</script>
<style lang="stylus" scoped>
bgBlue = linear-gradient(to right, #04befe, #4481eb)
nav
    width 100%
    height 50px
    background bgBlue
    img
        display inline-block
        float left
        width 25px
        height 25px
        margin 12px 10px
    p
        display inline-block
        width 80%
        float left
        font-size 18px
        color #ffffff
        text-align center
        line-height 50px
  .body
    width: 100%
    line-height 3
    font-size 14px
    color #2680c4
    background #eff3fa
    text-align center
  .btn
    width 100%
    text-align center;
    margin-top 2rem
    margin-bottom 2rem
  .list
    line-height 3
    font-size 14px
    text-align center
    color #2680c4
  .sousuo
    width 100%
    text-align center
    margin-top 2rem
    margin-bottom 2rem
  .page
    width 100%
    margin-top 2rem
    text-align center
</style>

